<!--
 * @Author: your name
 * @Date: 2021-09-28 11:27:16
 * @LastEditTime: 2021-09-28 11:32:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\Service.vue
-->
<template>
  <div>
    <section class="service" id="service">

    <h1 class="heading"> our <span>services</span> </h1>

    <div class="box-container">

        <div class="box">
            <i class="fas fa-map-marker-alt"></i>
            <h3>venue selection</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

        <div class="box">
            <i class="fas fa-envelope"></i>
            <h3>invitation card</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

        <div class="box">
            <i class="fas fa-music"></i>
            <h3>entertainment</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

        <div class="box">
            <i class="fas fa-utensils"></i>
            <h3>food and drinks</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

        <div class="box">
            <i class="fas fa-photo-video"></i>
            <h3>photos and videos</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

        <div class="box">
            <i class="fas fa-birthday-cake"></i>
            <h3>custom food</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, suscipit.</p>
        </div>

    </div>

</section>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="scss">
  .service .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap:1.5rem;
}

.service .box-container .box{
    border-radius: .5rem;
    background:#333;
    text-align: center;
    padding:2.5rem;
}

.service .box-container .box i{
    height: 6rem;
    width: 6rem;
    line-height: 6rem;
    border-radius: 50%;
    font-size: 2.5rem;
    background:var(--main-color);
    color:#fff;
}

.service .box-container .box h3{
    font-size: 2rem;
    color:#fff;
    padding:1rem 0;
}

.service .box-container .box p{
    font-size: 1.4rem;
    color:#eee;
    line-height: 1.8;
}

</style>